<template>
  <el-card shadow="always" class="statistic_count" justify="center">
    <el-button @click="handleSend()"> 添加管理员 </el-button>
  </el-card>
  <el-table :data="showData" style="width: 100%">
    <el-table-column prop="adminname" label="管理员名字" width="180" align="center" />
    <el-table-column prop="role" label="管理员角色" width="180" align="center" />
    <el-table-column label="操作" align="center">
      <template #default="scope">
        <el-button size="small" @click="handleEdit(scope.row)"> 编辑 </el-button>
        <el-button size="small" type="danger" @click="handleDelete(scope.row)"> 删除 </el-button>
      </template>
    </el-table-column>
  </el-table>
  <!-- 抽屉 -->
  <el-drawer v-model="drawer2" direction="rtl">
    <template #header>
      <h4>编辑</h4>
    </template>
    <template #default>
      <el-form label-width="auto" style="width: auto">
        <el-form-item label="管理员名字">
          <el-input v-model="fromDate.adminname" disabled />
        </el-form-item>
        <el-form-item label="密码"> <el-input v-model="fromDate.password" /> </el-form-item>
        <el-form-item label="管理员角色"> <el-input v-model="fromDate.role" /> </el-form-item>
      </el-form>
    </template>
    <template #footer>
      <div style="flex: auto">
        <el-button @click="cancelClick">取消</el-button>
        <el-button type="primary" @click="confirmClick">确定</el-button>
      </div>
    </template>
  </el-drawer>
  <el-card style="max-width: 480px" v-show="drawer" class="send">
    <template #header>
      <div class="card-header">
        <span>添加管理员</span>
      </div>
    </template>
    <template #default>
      <el-form label-width="auto" style="width: auto">
        <el-form-item label="管理员名字">
          <el-input v-model="sendForm.adminname" />
        </el-form-item>
        <el-form-item label="密码"> <el-input v-model="sendForm.password" /> </el-form-item>
        <el-form-item label="角色">
          <el-select v-model="sendForm.role" placeholder="请选择">
            <el-option label="超级管理员" value="1" />
            <el-option label="普通管理员" value="2" /> </el-select
        ></el-form-item>
      </el-form>
    </template>
    <template #footer="scope">
      <el-button @click="sendCancel()">取消</el-button>
      <el-button type="primary" @click="sendfirmClick()">确定</el-button>
    </template>
  </el-card>
  <!-- 分页 -->
  <!-- <el-pagination
    layout="prev, pager, next"
    :total="total"
    v-model:current-page="currentPage"
    :page-size="pageSize"
    @change="pageChange"
  /> -->
  <el-pagination
    layout="prev, pager, next"
    :total="total"
    v-model:current-page="currentPage"
    :page-size="pageSize"
  />
</template>

<script setup>
import { reactive, ref, computed } from 'vue'
import { adminList, adminDel, adminEdit, adminAdd } from '@/api/user'
import { ElMessage, ElMessageBox } from 'element-plus'

let currentPage = ref(1)
let total = ref(0)
let pageSize = ref(5)

// let showTableData = ref([])

//使用change事件
//当页码改变时，重新计算显示数据
// function pageChange() {
//   const startIndex = (currentPage.value - 1) * pageSize.value
//   const endIndex = startIndex + pageSize.value
//   //提取数组中对应数据，
//   showTableData.value = tableData.value.slice(startIndex, endIndex)
// }

const showData = computed(() => {
  const startIndex = (currentPage.value - 1) * pageSize.value
  const endIndex = startIndex + pageSize.value
  //提取数组中对应数据，
  return tableData.value.slice(startIndex, endIndex)
})

let tableData = ref([])
//编辑
let fromDate = ref({
  adminname: '',
  password: '',
  role: '',
})
//发布
let sendForm = reactive({
  adminname: '',
  password: '',
  role: '',
})
//获取管理员列表
function loadList() {
  adminList().then((r) => {
    tableData.value = r.data.data
    console.log(r.data.data)
    total.value = tableData.value.length
    // pageChange()
  })
}
loadList()
//删除管理员
function handleDelete(row) {
  ElMessageBox.confirm('确认删除?', 'Delete', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'error',
  })
    .then(() => {
      ElMessage({
        type: 'success',
        message: '删除成功',
      })
      adminDel(row.adminid)
      loadList()
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消删除',
      })
    })
}
const drawer2 = ref(false)
//编辑功能===========================================
function handleEdit(row) {
  drawer2.value = true
  fromDate.value = JSON.parse(JSON.stringify(row))
  console.log(fromDate.value)
}
//点击取消
function cancelClick() {
  drawer2.value = false
}

//点击确定
function confirmClick() {
  adminEdit(fromDate.value)
  ElMessage({
    type: 'success',
    message: '修改成功',
  })
  drawer2.value = false
  loadList()
}
//发布功能======================================
let drawer = ref(false)

function handleSend() {
  drawer.value = true
}
//取消
function sendCancel() {
  drawer.value = false
}
//确定
function sendfirmClick() {
  adminAdd(sendForm).then((r) => {
    console.log(r.data)
    let { message, code } = r.data
    if (code == 200) {
      ElMessage({
        type: 'success',
        message: message,
      })
      sendForm.adminname = ''
      sendForm.password = ''
      sendForm.role = ''
      loadList()
    } else {
      ElMessage({
        type: 'error',
        message: message,
      })
    }
  })
  drawer.value = false
}
</script>

<style scoped>
.send {
  width: 600px;
  float: left;
  position: fixed;
  top: 100px;
  left: 600px;
  z-index: 1;
}
.el-pagination {
  display: flex;
  justify-content: center;
}
</style>
